<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML表格与表单标签示例</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb',
                        secondary: '#64748b',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .table-shadow {
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            }
            .form-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800">
    <div class="container mx-auto px-4 py-8 max-w-5xl">
        <header class="mb-10 text-center">
            <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-gray-800 mb-3">HTML表格与表单标签应用</h1>
            <p class="text-gray-600">展示表格结构和各种表单元素的用法与作用</p>
        </header>

        <!-- 表格部分 -->
        <section class="mb-12 bg-white p-6 rounded-lg shadow-md">
            <h2 class="text-2xl font-semibold text-primary mb-6 flex items-center">
                <i class="fa fa-table mr-2"></i>表格标签示例
            </h2>
            
            <!-- 基本表格 -->
            <div class="mb-10">
                <h3 class="text-xl font-medium text-gray-700 mb-4">基本表格结构</h3>
                <table class="w-full border-collapse table-shadow rounded-lg overflow-hidden">
                    <caption class="bg-gray-50 text-left py-2 px-4 text-gray-600 font-medium border-b">学生基本信息表</caption>
                    <thead class="bg-gray-100">
                        <tr>
                            <th class="py-3 px-4 border-b text-left">学号</th>
                            <th class="py-3 px-4 border-b text-left">姓名</th>
                            <th class="py-3 px-4 border-b text-left">性别</th>
                            <th class="py-3 px-4 border-b text-left">年龄</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="hover:bg-gray-50">
                            <td class="py-3 px-4 border-b">2023001</td>
                            <td class="py-3 px-4 border-b">张三</td>
                            <td class="py-3 px-4 border-b">男</td>
                            <td class="py-3 px-4 border-b">20</td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="py-3 px-4 border-b">2023002</td>
                            <td class="py-3 px-4 border-b">李四</td>
                            <td class="py-3 px-4 border-b">女</td>
                            <td class="py-3 px-4 border-b">19</td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="py-3 px-4">2023003</td>
                            <td class="py-3 px-4">王五</td>
                            <td class="py-3 px-4">男</td>
                            <td class="py-3 px-4">21</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <!-- 带合并单元格的表格 -->
            <div>
                <h3 class="text-xl font-medium text-gray-700 mb-4">带合并单元格的表格</h3>
                <table class="w-full border-collapse table-shadow rounded-lg overflow-hidden">
                    <thead class="bg-gray-100">
                        <tr>
                            <th class="py-3 px-4 border-b text-center" rowspan="2">课程</th>
                            <th class="py-3 px-4 border-b text-center" colspan="2">考试成绩</th>
                        </tr>
                        <tr>
                            <th class="py-3 px-4 border-b text-center">期中</th>
                            <th class="py-3 px-4 border-b text-center">期末</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="hover:bg-gray-50">
                            <td class="py-3 px-4 border-b">数学</td>
                            <td class="py-3 px-4 border-b text-center">85</td>
                            <td class="py-3 px-4 border-b text-center">92</td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="py-3 px-4 border-b">英语</td>
                            <td class="py-3 px-4 border-b text-center">78</td>
                            <td class="py-3 px-4 border-b text-center">88</td>
                        </tr>
                        <tr class="hover:bg-gray-50 bg-gray-50 font-medium">
                            <td class="py-3 px-4">平均成绩</td>
                            <td class="py-3 px-4 border-b text-center">81.5</td>
                            <td class="py-3 px-4 text-center">90</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- 表单部分 -->
        <section class="bg-white p-6 rounded-lg shadow-md">
            <h2 class="text-2xl font-semibold text-primary mb-6 flex items-center">
                <i class="fa fa-wpforms mr-2"></i>表单标签示例
            </h2>
            
            <form class="max-w-3xl mx-auto">
                <!-- 个人信息区域 -->
                <fieldset class="mb-8 border border-gray-200 p-5 rounded-lg">
                    <legend class="font-medium text-gray-700">个人信息</legend>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                            <input 
                                type="text" 
                                id="name" 
                                name="name" 
                                required
                                class="w-full px-3 py-2 border border-gray-300 rounded-md form-focus outline-none transition"
                                placeholder="请输入姓名"
                            >
                        </div>
                        
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                            <input 
                                type="email" 
                                id="email" 
                                name="email" 
                                required
                                class="w-full px-3 py-2 border border-gray-300 rounded-md form-focus outline-none transition"
                                placeholder="example@mail.com"
                            >
                        </div>
                        
                        <div>
                            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">电话</label>
                            <input 
                                type="tel" 
                                id="phone" 
                                name="phone" 
                                pattern="[0-9]{11}"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md form-focus outline-none transition"
                                placeholder="11位手机号码"
                            >
                        </div>
                        
                        <div>
                            <label for="birthdate" class="block text-sm font-medium text-gray-700 mb-1">出生日期</label>
                            <input 
                                type="date" 
                                id="birthdate" 
                                name="birthdate" 
                                class="w-full px-3 py-2 border border-gray-300 rounded-md form-focus outline-none transition"
                            >
                        </div>
                    </div>
                </fieldset>
                
                <!-- 选择项区域 -->
                <fieldset class="mb-8 border border-gray-200 p-5 rounded-lg">
                    <legend class="font-medium text-gray-700">偏好设置</legend>
                    
                    <div class="mb-5">
                        <label class="block text-sm font-medium text-gray-700 mb-2">性别</label>
                        <div class="flex space-x-4">
                            <label class="inline-flex items-center">
                                <input type="radio" name="gender" value="male" class="mr-2">
                                <span>男</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="radio" name="gender" value="female" class="mr-2">
                                <span>女</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="radio" name="gender" value="other" class="mr-2">
                                <span>其他</span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="mb-5">
                        <label class="block text-sm font-medium text-gray-700 mb-2">兴趣爱好（可多选）</label>
                        <div class="grid md:grid-cols-2 gap-2">
                            <label class="inline-flex items-center">
                                <input type="checkbox" name="hobby" value="reading" class="mr-2">
                                <span>阅读</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="checkbox" name="hobby" value="sports" class="mr-2">
                                <span>运动</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="checkbox" name="hobby" value="music" class="mr-2">
                                <span>音乐</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="checkbox" name="hobby" value="travel" class="mr-2">
                                <span>旅行</span>
                            </label>
                        </div>
                    </div>
                    
                    <div>
                        <label for="education" class="block text-sm font-medium text-gray-700 mb-1">最高学历</label>
                        <select 
                            id="education" 
                            name="education" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md form-focus outline-none transition"
                        >
                            <option value="">请选择</option>
                            <option value="highschool">高中及以下</option>
                            <option value="college">专科</option>
                            <option value="bachelor">本科</option>
                            <option value="master">硕士</option>
                            <option value="phd">博士及以上</option>
                        </select>
                    </div>
                </fieldset>
                
                <!-- 文本区域和文件上传 -->
                <fieldset class="mb-8 border border-gray-200 p-5 rounded-lg">
                    <legend class="font-medium text-gray-700">附加信息</legend>
                    
                    <div class="mb-5">
                        <label for="introduction" class="block text-sm font-medium text-gray-700 mb-1">个人简介</label>
                        <textarea 
                            id="introduction" 
                            name="introduction" 
                            rows="4" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md form-focus outline-none transition"
                            placeholder="请简单介绍一下自己..."
                        ></textarea>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">上传头像</label>
                        <input 
                            type="file" 
                            id="avatar" 
                            name="avatar" 
                            accept="image/*"
                            class="w-full text-sm text-gray-500
                                file:mr-4 file:py-2 file:px-4
                                file:rounded-md file:border-0
                                file:text-sm file:font-medium
                                file:bg-primary file:text-white
                                hover:file:bg-primary/90
                            "
                        >
                    </div>
                </fieldset>
                
                <!-- 按钮区域 -->
                <div class="flex justify-end space-x-3">
                    <button 
                        type="reset" 
                        class="px-5 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition"
                    >
                        <i class="fa fa-refresh mr-1"></i>重置
                    </button>
                    <button 
                        type="submit" 
                        class="px-5 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition"
                    >
                        <i class="fa fa-check mr-1"></i>提交
                    </button>
                </div>
            </form>
        </section>
    </div>
</body>
</html>
    